<script lang="tsx" setup>
import { ElTableColumn } from 'element-plus'
import type { ColumnItem, RenderScope, HeaderRenderScope } from '../interface'
import { useThemeStore } from '@/stores/modules/theme'

const themeStore = useThemeStore()

const size = computed(() =>
  themeStore.themeConfig.componentSize === 'large' ? 'default' : 'small'
)

defineProps<{ column: ColumnItem }>()

// 获取插槽内容
const slots = useSlots()

const ColumnRender = (item: ColumnItem) => {
  return (
    <ElTableColumn {...item} reserve-selection={item.type == 'selection'}>
      {{
        default: (scope: RenderScope<any>) => {
          if (item.type === 'sort')
            return <span class="table-drag-btn iconfont icon-icon-drag"></span>
          if (item.type === 'operation') {
            const showBtn = item.operation!.filter((op) => op?.show === undefined || op.show(scope))
            if (showBtn.length === 0) return '--'
            return (
              <div class="operation-btns">
                <el-button
                  text
                  type="primary"
                  size={size.value}
                  onClick={() => showBtn[0].click(scope)}
                >
                  {showBtn[0].label}
                </el-button>
                {showBtn.length === 2 ? (
                  <el-button
                    text
                    type="primary"
                    size={size.value}
                    onClick={() => showBtn[1].click(scope)}
                  >
                    {showBtn[1].label}
                  </el-button>
                ) : (
                  showBtn.length > 2 && (
                    <el-dropdown trigger="click" placement="bottom-end">
                      {{
                        default: () => (
                          <el-button text type="primary" size={size.value}>
                            更多
                          </el-button>
                        ),
                        dropdown: () => (
                          <el-dropdown-menu>
                            {showBtn.slice(1).map((op) => (
                              <el-dropdown-item onClick={() => op.click(scope)}>
                                {op.label}
                              </el-dropdown-item>
                            ))}
                          </el-dropdown-menu>
                        )
                      }}
                    </el-dropdown>
                  )
                )}
              </div>
            )
          }
          if (item.render) return item.render(scope)
          if (item.prop && slots[item.prop]) return slots[item.prop!]!(scope)
          if (item.formatter && item.prop)
            return item.formatter(scope.row, scope.column, scope.row[item.prop], scope.index)
          return item.prop && scope.row[item.prop]
        },
        header: (scope: HeaderRenderScope<any>) => {
          if (item.headerRender) return item.headerRender(scope)
          if (item.prop && slots[`${item.prop}Header`]) return slots[`${item.prop}Header`]!(scope)
          return item.label
        }
      }}
    </ElTableColumn>
  )
}
</script>

<template>
  <ColumnRender v-bind="column" />
</template>
